<template>
  <div class="car-drive">
    <Loading :loading="pageLoading" />
    <v-app v-show="!pageLoading" class="container">
      <div class="main">
        <v-row
          class="py-2 py-sm-5 px-3 px-sm-10 d-none d-sm-flex"
          style="border-bottom: 1px solid #f1f1f1"
          no-gutters
          align="center"
          justify="space-between"
        >
          <img
            class="d-none d-sm-flex"
            src="~/assets/logo.jpg"
            alt="logo"
            style="width: 100px; height: 72px"
            @click="goto('/')"
          />
          <v-col class="d-sm-flex d-none">
            <v-row no-gutters align="center" justify="center">
              <NuxtLink
                v-ripple
                class="v-btn v-btn--text theme--light v-size--default"
                :to="localePath('/')"
              >
                {{ $t('home') }}
              </NuxtLink>
              <NuxtLink
                v-ripple
                class="v-btn v-btn--text theme--light v-size--default"
                :to="localePath('/tour')"
              >
                {{ $t('tour') }}
              </NuxtLink>
              <NuxtLink
                v-ripple
                class="v-btn v-btn--text theme--light v-size--default"
                :to="localePath('/searchcar')"
              >
                {{ $t('vehicleprice') }}
              </NuxtLink>
              <NuxtLink
                v-ripple
                class="v-btn v-btn--text theme--light v-size--default"
                :to="localePath('/shop')"
              >
                {{ $t('shop') }}
              </NuxtLink>
              <NuxtLink
                v-ripple
                class="v-btn v-btn--text theme--light v-size--default"
                :to="localePath('/board')"
              >
                {{ $t('messageboard') }}
              </NuxtLink>
              <NuxtLink
                v-if="isLogin"
                v-ripple
                class="v-btn v-btn--text theme--light v-size--default"
                :to="localePath('/person')"
              >
                {{ $t('beginners') }}
              </NuxtLink>
            </v-row>
          </v-col>

          <div class="right-btn">
            <v-row no-gutters align="center" justify="space-between" class="d-none d-sm-flex">
              <v-select
                :value="$i18n.locale"
                full-width
                hide-details
                dense
                style="width: 100px"
                :items="items"
                append-icon="$dropdown"
                class="mr-5"
                @change="changeLocale"
              />
              <v-btn
                v-if="!isLogin && $route.name !== 'signup'"
                elevation="2"
                rounded
                dark
                color="#E22129FF"
                style="text-transform: none"
                @click="goto('signup')"
              >
                {{ $t('signup') }}
              </v-btn>
              <v-btn
                v-if="!isLogin && $route.name !== 'signin'"
                class="ml-1"
                elevation="2"
                rounded
                dark
                color="#E22129FF"
                style="text-transform: none"
                @click="goto('signin')"
              >
                {{ $t('signin') }}
              </v-btn>
              <v-btn
                v-if="isLogin && $route.name !== 'signin'"
                class="ml-1"
                elevation="2"
                rounded
                dark
                color="#E22129FF"
                style="text-transform: none"
                @click="logOut"
              >
                {{ $t('logout') }}
              </v-btn>
            </v-row>
          </div>
        </v-row>

        <v-app-bar class="d-block d-sm-none" color="white">
          <v-app-bar-nav-icon @click="drawer = true" />

          <v-toolbar-title style="display: flex; width: 100%">
            <img
              style="margin-left: 30%; width: 60px; height: 43px"
              class=""
              src="~/assets/logo.jpg"
              alt="logo"
              @click="goto('/')"
            />
          </v-toolbar-title>
        </v-app-bar>

        <v-navigation-drawer v-model="drawer" absolute touchless temporary>
          <v-list nav dense class="mobile-nav-list">
            <v-list-item-group v-model="group" active-class="deep-dark--text text--accent-4">
              <v-list-item>
                <v-list-item-title>
                  <v-row
                    no-gutters
                    align="center"
                    justify="space-between"
                    class="d-flex d-sm-none px-4"
                  >
                    <v-select
                      v-model="$i18n.locale"
                      full-width
                      hide-details
                      dense
                      style="width: 90px"
                      :items="items"
                      append-icon="$dropdown"
                      class="mr-0"
                      @change="changeLocale"
                    />
                  </v-row>
                </v-list-item-title>
              </v-list-item>
              <NuxtLink :to="localePath('/')">
                <v-list-item>
                  <v-list-item-title>
                    <span class="nav">{{ $t('home') }}</span>
                  </v-list-item-title>
                </v-list-item>
              </NuxtLink>
              <NuxtLink :to="localePath('/tour')">
                <v-list-item>
                  <v-list-item-title>
                    <span class="nav">{{ $t('tour') }}</span>
                  </v-list-item-title>
                </v-list-item>
              </NuxtLink>
              <NuxtLink :to="localePath('/searchcar')">
                <v-list-item>
                  <v-list-item-title>
                    <span class="nav">{{ $t('vehicleprice') }}</span>
                  </v-list-item-title>
                </v-list-item>
              </NuxtLink>
              <NuxtLink :to="localePath('/shop')">
                <v-list-item>
                  <v-list-item-title>
                    <span class="nav">{{ $t('shop') }}</span>
                  </v-list-item-title>
                </v-list-item>
              </NuxtLink>
              <NuxtLink v-if="isLogin" :to="localePath('/person')">
                <v-list-item>
                  <v-list-item-title>
                    <span class="nav">{{ $t('beginners') }}</span>
                  </v-list-item-title>
                </v-list-item>
              </NuxtLink>
              <NuxtLink :to="localePath('/board')">
                <v-list-item>
                  <v-list-item-title>
                    <span class="nav">{{ $t('messageboard') }}</span>
                  </v-list-item-title>
                </v-list-item>
              </NuxtLink>
              <NuxtLink
                v-if="!isLogin && $route.path !== localePath('/signup')"
                :to="localePath('/signup')"
              >
                <v-list-item>
                  <v-list-item-title>
                    <span class="nav nav-red">{{ $t('signup') }}</span>
                  </v-list-item-title>
                </v-list-item>
              </NuxtLink>
              <NuxtLink
                v-if="!isLogin && $route.path !== localePath('/signin')"
                :to="localePath('/signin')"
              >
                <v-list-item>
                  <v-list-item-title>
                    <span class="nav nav-red">{{ $t('signin') }}</span>
                  </v-list-item-title>
                </v-list-item>
              </NuxtLink>
              <v-list-item v-if="isLogin">
                <v-list-item-title @click="logOut">
                  <span class="nav nav-red">{{ $t('logout') }}</span>
                </v-list-item-title>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-navigation-drawer>
        <v-main>
          <Nuxt />
        </v-main>
        <v-divider class="mt-4" />
        <div class="footer">
          <div class="footer-item licenses">
            <div class="licenses-title">{{ $t('licenses') }}</div>
            <div>東京都公安委員会 古物商</div>
            <div>第 302192516168号 [自動車商]</div>
            <br />
            <div>レンタカー事業者</div>
            <div>東京運輸支局 第 0999号</div>
          </div>
          <div class="footer-item copyright">
            <img width="100" src="~/assets/logo.jpg" alt="logo" />
            <NuxtLink style="margin-left: 14px; color: #1976d2" to="/specificbusiness?id=0">
              {{ $t('specificTrade') }}
            </NuxtLink>
            <div>©2025 J Project Co.,Ltd. all rights reserved.</div>
          </div>
        </div>
      </div>
      <Toast />
    </v-app>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'DefaultLayout',
  data() {
    return {
      drawer: false,
      group: null,
      items: [
        {
          text: 'English',
          value: 'en'
        },
        {
          text: '日本語',
          value: 'ja'
        },
        {
          text: '繁體中文',
          value: 'zh-Hant'
        }
      ],
      model: ''
    };
  },
  computed: {
    ...mapState(['isLogin', 'pageLoading'])
  },
  methods: {
    ...mapMutations({
      setLogin: 'setLogin',
      showToast: 'toast/show'
    }),
    changeLocale(val) {
      this.$router.push(this.switchLocalePath(val));
    },
    goto(path) {
      this.drawer = false;
      this.$router.push(this.localePath(path));
    },
    logOut() {
      this.$api.post('/user/logout', { ordersn: this.ordersn }, { getAll: true }).then((res) => {
        if (res.code === 1) {
          this.setLogin(false);
          this.showToast(res.msg || 'Logout success');
          if (process.env.NODE_ENV === 'development') {
            this.$cookies.remove('token');
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.mobile-nav-list {
  a {
    text-decoration: none;
  }
}

a.v-btn {
  text-transform: unset;
}

.nav {
  height: 36px;
  min-width: 64px;
  padding: 0 16px;
  font-weight: 500;
  color: #1976d2;
  font-size: 0.875rem;
  letter-spacing: 0.0892857143em;
  user-select: none;
  &.nav-red {
    color: #e53935;
  }
}
.main {
  padding-bottom: 200px;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.footer-item {
  height: 170px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.licenses {
  font-size: 14px;
  color: #64626a;
  align-items: flex-start;
}
.licenses-title {
  font-size: 16px;
  font-weight: bolder;
  line-height: 28px;
  margin-bottom: 12px;
}
.copyright {
  align-items: flex-end;
}
@media screen and (max-width: 600px) {
  .main {
    padding-bottom: 400px !important;
  }
  .footer {
    height: 400px;
  }
  .licenses,
  .copyright {
    align-items: center;
  }
}
</style>
<style lang="scss">
.v-input__slot {
  &:before {
    display: none;
  }

  &:after {
    display: none;
  }
}

html {
  overflow-x: hidden;
}
</style>
<style lang="scss">
* {
  text-transform: none;
  box-sizing: border-box;
}
body {
  overflow-x: hidden;
}
.car-drive {
  justify-content: center;
  width: 100%;
  .container {
    max-width: 1200px;
    padding: 0;

    a {
      color: unset;
      text-decoration: none;
    }
  }
}
.white-to-black {
  position: relative;
  display: inline-block;
}

.white-to-black::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #fff, #000);
  mix-blend-mode: multiply;
}
.mx-datepicker-main {
  div {
    opacity: 1 !important;
  }
}
.mx-input:disabled,
.mx-input.disabled {
  color: black !important;
}
.red {
  color: red;
}
</style>
